<template>
  <div class="my">
    <div class="total">
      <div class="top">
        <div class="topBg"></div>
      </div>
      <div class="big">
       <p>
          <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp473481011.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632109187&t=b5986fcfa21e8317d756f4d77a7cd782"
          alt=""
        />
       </p>
        <p>
          <span>游客</span>
        </p>
        <p>
            <button @click="handleLogin">去登录</button>
        </p>
      
      </div>
    </div>

    <!-- 跳转路由 -->
    <div class="dll">
      <dl @click="hanldeGo1">
        <dt>
          <i class="iconfont icon-shouye"></i>
        </dt>
        <dd>我的出租</dd>
      </dl>
      <dl @click="hanldeGo2">
        <dt>
          <i class="iconfont icon-faxiandingdan"></i>
        </dt>
        <dd>看房记录</dd>
      </dl>
      <dl @click="hanldeGo3">
        <dt><i class="iconfont icon-quanbudingdan-01"></i></dt>
        <dd>成为房主</dd>
      </dl>
      <dl @click="hanldeGo4">
        <dt><i class="iconfont icon-icongerenzhongxin-01"></i></dt>
        <dd>个人资料</dd>
      </dl>
      <dl @click="hanldeGo4">
        <dt><i class="iconfont icon-phonenum"></i></dt>
        <dd>联系我们</dd>
      </dl>
    </div>
    <div class="img">
      <img
        src="https://api-haoke-web.itheima.net/img/profile/join.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    hanldeGo1() {
      this.$router.push("/chu");
    },
    hanldeGo2() {
      this.$router.push("/look");
    },
    hanldeGo3() {
      this.$router.push("/cheng");
    },
    hanldeGo4() {
      this.$router.push("/ge");
    },
    hanldeGo5() {
      this.$router.push("/lian");
    },
    handleLogin(){
      this.$router.push("/login");
    }
  },
};
</script>

<style  scoped lang="scss">
.my {
  background: #fff;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .total {
    width: 100%;
    height: 290px;
  }
  .top {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .topBg {
      width: 150%;
      height: 200px;
      border-radius: 0 0 80% 80%;
      position: relative;
      left: -25%;
      background: url("https://api-haoke-web.itheima.net/img/profile/bg.png");
    }
  }
}
.big {
  position: relative;
  width: 290px;
  display: block;
  height: 165px;
  background: #fff;
  position: absolute;
  top: 22%;
  left: 9%;
  box-shadow: 0 0 10px 3px #ddd;

p{
  text-align: center;
  img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    top: -20%;
    left: 36%;
  }
  button{
    border-radius: 30px;
    color: #fff;
    padding: 2px 15px;
    background: #21b97a;
    font-size: 12px;
    border:none;
  }
  
}

p:nth-of-type(2){
margin-top:50px;
margin-bottom: 20px;
}
 
 
 
}
.dll {
 width: 100%;
padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  position: absolute;

  dl {
    margin-bottom: 20px;
   width: 32%;
   text-align: center;

    

    dt {
      margin: 10px auto;
      display: block;
      i {
        font-size: 20px;
      }
    }
  }
}
.img {
  margin-top: 100px;
  width: 90%;
  margin: 100px auto;
  img {
    width: 100%;
    height: 140px;
  }
}
</style>